<template>
	<view>
		<view>投诉类型</view>

		<view class="tags">
			<view 
			 class="tags-item"
			 v-for="(val,num) in tags" 
			 :key="'tag_'+num"
			 :class="index == num ? 'active' : ''"
			 @click="changTag(num)"
			>{{val}}</view>
		<!-- 	<view class="tags-item">菜品问题</view>
			<view class="tags-item">付款问题</view> -->
		</view>

		<textarea 
		v-model="msg"
		focus="true" style="background-color: #f1f1f1; width: 100%;" placeholder="输入投诉详细说明(选填)" />

		<view class="upload" style="display: flex; margin-top: 30rpx;">
			<!-- 默认上传的图片 -->
			<!-- <block v-for="imageUrl in imgArr"> -->
			<image style="width: 150rpx;height: 150rpx;" :src="imgUrl" mode=""></image>
			<!-- </block> -->
			<view
				@click="selectPicture"
				style="width: 150rpx;height: 150rpx;background-color: #C0C0C0;font-size: 50px;display: flex;justify-content: center;align-items: center;">
				+
			</view>
		</view>

		<button style="width: 100%; position: fixed;bottom: 0; left: 0;" 
		type="warn"
		@click="subInfo"
		>提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tags:[
					'服务态度',
					'菜品问题',
					'付款问题'
				],
				index:0,//默认第1个 tag 选中
				imgUrl:"", //图片
				msg:"" //内容
			}
		},
		methods: {
			subInfo(){
				//提交表单
				var data = {
					imgUrl:this.imgUrl,
					content:this.msg, //内容
					type:this.tags[this.index]
				}
				//发请求,保存数据
				/* uni.request({
					url:"http://api.brqc.com.cn/save.php",
					data:data,
					success(res){
						//提交完成，处理的逻辑
					}
				}) */
				console.log("提交数据ok:",data)
			},
			changTag(num){
				console.log(num,this.tags[num])
				this.index = num;
			},
			selectPicture(){
				//1.调用api,获取选择的相册文件
				uni.chooseImage({
					count:1,
					sizeType:"compressed",//压缩后的图片
					success:(res)=>{
						console.log(res)
						/* 
						 res = {
							 errMsg: "chooseImage:ok"
							 tempFilePaths: ["http://tmp/sk5r77BMvmemf9e9019d763ed03aa112452478702b4f.gif"]
							 tempFiles: [{…}]
						 }
						 */
						//2.调用上传文件接口，上传图片
						const tempFilePaths = res.tempFilePaths; //取1张图片
						uni.uploadFile({
							// url: 'http://api.brqc.com.cn//shxmp/upload', //仅为示例，非真实的接口地址
							url: 'http://api.brqc.com.cn/shxmp/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'pic',//文件表单名称
							/* formData: {
								//处理文件上传外的其他表单数据
								'user': 'test'
							}, */
							success: (uploadFileRes) => {
								console.log(uploadFileRes,uploadFileRes.data);
								/* 
								"{"data":{"pic":"/uploads/d29938ba7b25413d31a3ece47d1ea4b8.jpg","originalname":"tmp_ae67272c7535a172a4ce85c3c8e5f393e7f73a389e4772ee.jpg","extname":".jpg","size":"0.13 MB"},"code":0,"msg":"图片上传成功"}"
								 转为对象：
								 {
									 code: 0
									 data: {pic: "/uploads/99edb0d07c101c9546ad4127be72a13d.jpg",…}
									 msg: "图片上传成功"
								 }
								*/
							    let json_obj =  uploadFileRes.data ? JSON.parse( uploadFileRes.data) :null;
	
								if(json_obj && json_obj.code == 0){
									console.log("上传ok，保存图片:",json_obj.data.pic)
									this.imgUrl = json_obj.data.pic;
								}
							},
							fail(err){
								console.log(err)
							}
						});
				
					},
					fail(err){
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.tags {
		display: flex;
		border-bottom: 1px solid #C8C7CC;

		.tags-item {
			border: 1px solid #ccc;
			margin-left: 30rpx;
			padding: 2rpx 10rpx;

			&.active {
				background-color: orange;
				color: #fff;
			}
		}
	}
</style>
